import { Route, Switch, Link, Redirect, useLocation } from "react-router-dom";
import { Layout, Menu } from "antd";
import { INDEX, ROUTES, NAV_ITEMS } from "./routes";
import "./assets/style/app.css";

let { Header, Content, Footer } = Layout;
let { SubMenu, Item } = Menu;
function App() {
    return (
        <Layout className="layout">
            <Header className="header">
                <h1 className="logo">泛在数据信息建模平台</h1>
                <Menu 
                    mode="horizontal" 
                    theme="dark"
                    selectedKeys={[useLocation().pathname]}
                >
                    {createMenu(NAV_ITEMS)}
                </Menu>
            </Header>
            <Content className="content">
                <Switch>
                    {createRoutes(ROUTES)}
                    <Redirect from="/" to={INDEX} exact />
                    <Route render={() => <h3>Not found</h3>} />
                </Switch>
            </Content>
            <Footer className="footer">
                Copyright © 2013-2020 南京师范大学-信息工程大学-中南大学. All Rights Reserved.
            </Footer>
        </Layout>
    );
}

function createMenu(items){
    let arr = [];
    items.forEach(item => {
        if(item.children){
            arr.push(<SubMenu key={item.key} title={item.title} popupOffset={[0, 2]}>{createMenu(item.children)}</SubMenu>);
        }
        else{
            arr.push(
                <Item key={item.key}>
                    <Link to={item.key}>{item.title}</Link>
                </Item>);
        }
    });
    return arr;
}

function createRoutes(items){
    return items.map(item => <Route key={item.key} path={item.key}><item.component /></Route>);
}

export default App;
